<template>
  <div class="search">
    <div class="search-item">
      <div class="search-header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item @click="reTrademark()">{{
            $route.query.categoryName
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="search-body">
        <ul>
          <li class="search-body-nav">
            <span class="span-name">分类：</span>
            <span
              v-for="tm in trademarkList"
              :key="tm.tmId"
              class="span-list"
              @click="searchTrademark(tm)"
              >{{ tm.tmName }}</span
            >
          </li>
        </ul>
        <ul v-for="attr in attrsList" :key="attr.attrId">
          <li class="search-body-nav">
            <span class="span-name">{{ attr.attrName }} ：</span>
            <span v-for="(attrValue, index) in attr.attrValueList" :key="index">
              <a class="span-list">{{ attrValue }}</a>
            </span>
          </li>
        </ul>
      </div>
      <!-- 商品列表 -->
      <div class="search-footer">
        <router-link
          :to="{
            name: 'Detail',
            params: {
              id: goods.id,
            },
          }"
          v-for="goods in goodsList"
          :key="goods.id"
        >
          <div class="search-img">
            <img :src="goods.defaultImg" />
            <div class="search-text">
              <span><em class="bg-red">新品</em>{{ goods.title }}</span>
              <span>0元预约火热进行中</span>
              <span class="shop-price">￥{{ goods.price }}</span>
              <span class="shop-spr"
                ><em>限时直降390</em><em>限时赠</em><em>赠积分</em></span
              >
            </div>
          </div>
        </router-link>
      </div>
      <div class="pagination">
        <el-pagination
          background
          :total="total"
          :page-size="searchOptions.pageSize"
          @current-change="currentChange"
          layout="prev, pager, next"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchGoods } from "@/api/search";

export default {
  name: "WSearch",
  async mounted() {
    // 搜索方法调用
    this.search();
  },
  data() {
    return {
      // 商品总数
      total: 0,
      // 属性列表
      attrsList: [],
      // 品牌列表
      trademarkList: [],
      // 商品列表
      goodsList: [],
      // 存储搜索条件
      searchOptions: {
        props: [],
        trademark: "",
        order: "",
        pageSize: 20,
      },
    };
  },
  methods: {
    async search() {
      const result = await getSearchGoods({
        ...this.searchOptions,
        ...this.$router.query,
      });
      this.attrsList = result.attrsList;
      this.trademarkList = result.trademarkList;
      this.goodsList = result.goodsList;
      this.total = result.total;
    },
    searchTrademark(tm) {
      const trademark = `${tm.tmId}:${tm.tmName}`;
      if (this.searchOptions.trademark === trademark) return;
      this.searchOptions.trademark = trademark;
      this.search();
    },
    reTrademark() {
      this.searchOptions.trademark = "";
      this.search();
    },
    currentChange(currentPage) {
      this.searchOptions.pageNo = currentPage;
      this.search();
    },
  },
  watch: {
    $router() {
      this.search();
    },
  },
};
</script>

<style>
.search {
  background-color: #f1f3f5;
}
.search-item {
  width: 1200px;
  margin: 0 auto;
}
.search-header {
  height: 33px;
  /* line-height: 63px; */
  padding-top: 30px;
  color: rgb(0, 0, 0);
}
.el-breadcrumb {
  font-size: 12px;
}
.el-breadcrumb__inner {
  font-weight: 300 !important;
}
.el-breadcrumb__inner:hover {
  font-size: 13px;
  color: #d72543 !important;
}
.search-body {
  padding: 24px;
  /* height: 244px; */
  background-color: #ffffff;
}
.span-name {
  font-size: 12px;
  color: rgb(51, 51, 51);
  opacity: 0.6;
  margin-right: 20px;
}
.search-body-nav .span-list {
  display: inline-block;
  margin-right: 30px;
  height: 40px;
  line-height: 30px;
  font-size: 12px;
}
.search-body-nav .span-list:hover {
  color: #d72543;
  font-size: 13px;
  cursor: pointer;
}
.search-footer {
  margin-top: 20px;
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}
.search-footer a {
  margin-right: 12px;
}
.search-footer a:nth-child(4n) {
  margin-right: 0;
}
.search-footer a img {
  width: 180px;
  height: 180px;
}
.search-img {
  background-color: #fff;
  /* height: 291px; */
  width: 291px;
  text-align: center;
  margin-bottom: 10px;
}
.search-text {
  padding: 10px 24px 36px 24px;
}
.search-text span {
  display: block;
  font-size: 14px;
  line-height: 19px;
  overflow: hidden;
  margin-top: 10px;
}
.search-text span:first-child {
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bg-red {
  background-color: #d72543;
  color: #fff;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 12px;
}
.shop-price {
  font-weight: 400;
  color: #d72543;
}
.shop-spr em {
  font-size: 12px;
  border: 1px solid;
  border-color: rgba(207, 10, 44, 0.4);
  margin-right: 10px;
  border-radius: 4px;
  color: #d72543;
  padding: 0 4px;
}
.pagination {
  margin-bottom: 20px;
}
.pagination .el-pagination {
  height: 70px;
  line-height: 100px;
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
</style>